<template>
  <div id="finance-list">
    <u-dialog
      :dialogVisible.sync="createVisible"
      title="添加财务"
      :component="CreatedForm"
      @success="fetchList"
    ></u-dialog>
    <u-dialog
      :dialogVisible.sync="editVisible"
      title="编辑财务"
      :component="CreatedForm"
      :componentModel="editModel"
      @success="fetchList"
    ></u-dialog>
    <u-panel title="财务列表">
      <template slot="action-items">
        <a-button-group>
          <a-tooltip title="添加财务" placement="top">
            <a-button icon="plus" @click="handleCreate"></a-button>
          </a-tooltip>
          <a-tooltip title="导出财务" placement="top">
            <a-button icon="download" @click="handleDownload"></a-button>
          </a-tooltip>
          <a-tooltip title="刷新" placement="top">
            <a-button
              icon="reload"
              @click="fetchList"
              :disable="loading"
            ></a-button>
          </a-tooltip>
        </a-button-group>
      </template>
    </u-panel>
    <u-filters>
      <template slot="items">
        <div class="filters-item">
          <a-select
            style="width: 120px"
            v-model="filters.is_income"
            :loading="loading"
          >
            <a-select-option :value="-1">全部</a-select-option>
            <a-select-option :value="1">收入</a-select-option>
            <a-select-option :value="0">支出</a-select-option>
          </a-select>
        </div>
        <div class="filters-item">
          <a-select
            style="width: 120px"
            v-model="filters.type"
            :loading="loading"
          >
            <a-select-option :key="-1" :value="-1">全部</a-select-option>
            <a-select-option
              :key="key"
              :value="item.value"
              v-for="(item, key) in mapType"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </div>
        <div class="filters-item">
          <a-range-picker
            :ranges="dateRange"
            v-model="dateAry"
            format="YYYY-MM-DD"
          />
        </div>
        <div class="filters-item">
          <a-button icon="reload" @click="handleReset" :loading="loading"
            >重置</a-button
          >
          <a-button icon="search" @click="fetchList" :loading="loading"
            >搜索</a-button
          >
        </div>
      </template>
    </u-filters>
    <a-table
      :columns="columns"
      :dataSource="data"
      rowKey="id"
      size="middle"
      :pagination="pagination"
      @change="handleTableChange"
      :loading="loading"
    >
      <template slot="status" slot-scope="text, record">
        <a-switch
          checkedChildren="启用"
          unCheckedChildren="禁用"
          @change="handleChangeStatus(record)"
          :checked="text ? true : false"
        >
        </a-switch>
      </template>
      <template slot="action" slot-scope="record">
        <!-- 编辑操作 -->
        <a-button-group>
          <!-- 删除操作 -->
          <a-popconfirm
            title="确认删除该财务，该操作不可逆?"
            @confirm="handleDelete(record.id)"
            okText="确认"
            cancelText="取消"
          >
            <a-button type="danger" icon="delete" size="small"></a-button>
          </a-popconfirm>
        </a-button-group>
      </template>
      <template slot="is_income" slot-scope="text">
        <a-icon type="caret-up" v-if="text" style="color:red"></a-icon>
        <a-icon type="caret-down" v-else style="color:green"></a-icon>
      </template>
      <template slot="amount" slot-scope="text">
        {{ text | formatMoney }}
      </template>
      <template slot="footer">
        总流水：{{ flow | formatMoney }}，支出{{ expend | formatMoney }},收入{{
          income | formatMoney
        }}
      </template>
    </a-table>
  </div>
</template>

<script>
const pageSize = 15;
import moment from "moment";
import columns from "./components/list";
import { fetchList, deleteFinance, fetchType } from "@/api/finance";
import common from "@/utils/common";
import UPanel from "@/components/Panel/Panel";
import UFilters from "@/components/Filters/Filters";
import CreatedForm from "./components/Form";
export default {
  components: {
    UPanel,
    UFilters
  },
  data() {
    return {
      data: [],
      mapType: [],
      createVisible: false,
      editVisible: false,
      moneyOpVisible: false,
      columns,
      CreatedForm,
      moneyModel: {},
      editModel: {},
      loading: false,
      dateFormat: "YYYY/MM/DD",
      monthFormat: "YYYY/MM",
      dateRange: {
        "今 天": [moment(), moment()],
        "昨 天": [
          moment()
            .startOf("day")
            .subtract(1, "days"),
          moment()
            .endOf("day")
            .subtract(1, "days")
        ],
        最近一周: [
          moment()
            .startOf("day")
            .subtract(1, "weeks"),
          moment()
        ],
        "本 月": [moment().startOf("month"), moment().endOf("month")]
      },
      dateAry: [],
      filters: {
        page: 1,
        size: pageSize,
        is_income: -1,
        type: -1,
        dateRange: []
      },
      expend: 0,
      flow: 0,
      income: 0,
      pagination: {
        pageSize,
        total: 0
      }
    };
  },
  created() {
    this.fetchType();
    this.fetchList();
  },
  watch: {
    dateAry(val) {
      let momentAry = [];
      if (val.length > 1) {
        momentAry.push(this.dateAry[0].format("YYYY-MM-DD HH:mm:ss"));
        momentAry.push(this.dateAry[1].format("YYYY-MM-DD HH:mm:ss"));
      }
      this.filters.dateRange = momentAry;
    }
  },
  methods: {
    moment,
    fetchList() {
      this.loading = true;
      fetchList(this.filters).then(res => {
        this.loading = false;
        let $data = res.data;
        this.flow = $data.flow;
        this.expend = $data.expend;
        this.income = $data.income;
        this.pagination.total = $data.total;
        this.data = $data.data;
      });
    },
    fetchType() {
      fetchType().then(res => {
        if (res.code === 1) {
          this.mapType = res.data;
        }
      });
    },
    handleTableChange(pagination) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.filters.page = pager.current;
      this.fetchList();
    },
    handleChangeStatus(record) {
      record.status = !record.status;
    },
    handleCreate() {
      this.createVisible = true;
    },
    handleDownload() {},
    handleReset() {
      this.filters.type = -1;
      this.filters.is_income = -1;
      this.fetchList();
    },
    handleEdit(record) {
      this.editVisible = true;
      this.editModel = { ...record };
    },
    handleDelete(id) {
      deleteFinance(id).then(() => {
        this.fetchList();
      });
    }
  },
  filters: {
    formatMoney(money) {
      return common.formatMoney(money);
    }
  }
};
</script>

<style lang="less" scoped></style>
